<template>
   <!-- 侧边栏区域 -->
  <el-container class="home-Container">
  <el-aside :width="iscollspace ? '64px' : '200px' ">
    <div class="h1_text">电子烟销售管理系统</div>
     <el-menu
      @open="handleOpen"
      @close="handleClose"
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#4C79EC"
      text-color="#fff"
      unique-opened
      :router="true"
      :select="option(option)"
      :collapse="iscollspace"
      :collapse-transition="false"
      active-text-color="chocolate">
      <!-- <el-submenu index="1">
        <template slot="title">
          <i class="iconfont iconshouye "></i>
          <span>首页</span>
        </template>
      </el-submenu> -->
      <el-submenu index="2" >
        <template slot="title">
          <i class="iconfont iconyishouquan"></i>
          <span>订单管理</span>
        </template>
         <el-menu-item-group>
          <el-menu-item index="myorder" >我的订单</el-menu-item>
          <el-menu-item index="1-2">收货管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="iconfont iconyishouquan"></i>
          <span>认证审核管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
    </el-aside>
  <el-container>
    <el-header>
      <div class="header_left" @click="toggleCollapse">|||</div>
      <div class="header_right">
        <i></i>
        <el-dropdown  :hide-on-click="false" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
           <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
          admin<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item command="a">个人中心</el-dropdown-item>
          <el-dropdown-item @click="lanyout" command="b">退出</el-dropdown-item>
          <el-dropdown-item command="c">详情</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
// import mock from '../../mock/mock.js'
export default {
  data () {
    return {
      size: 30,
      squareUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      iscollspace: false
    }
  },
  created () {
    this.getMenuList()
  },
  methods: {
    async getMenuList () {
      // const res = await this.$axios.get('/listNvgit')
      // console.log(res)
    },
    toggleCollapse () {
      // console.log(566)
      this.iscollspace = !this.iscollspace
    },
    lanyout () {
      console.log(6)
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleCommand (command) {
      // this.$message('click on item ' + command)
      console.log(command)
      if (command === 'b') {
        console.log(6)
        window.sessionStorage.clear()
        this.$router.push('/login')
      }
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    option () {
      // console.log(5)
    }
  }
}
</script>

<style lang='less' scoped>
.el-header {
  background-color: #fff;
   display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  height: 50px !important;
  .header_left {
    width: 20px;
    height: 20px;
    line-height: 50px;
    cursor: pointer;
    // background-color: blue;
  }
  .header_right {
   display: flex;
  //  justify-content: center;
  align-items: center;
    .el-avatar {
       vertical-align: middle;
    }
  }
}
.home-Container{
  height: 100%;
}
.el-aside {
  // background: linear-gradient(33deg, #0c5e94, #0686c2);
  // border-block-color: #4C79EC;
  background-color: #2E69EB;
  height: 100%;
  user-select: none;
  .h1_text {
    line-height: 50px;
    text-align: center;
    color: #fff;
    height: 50px;
  }
  .el-menu {
    border-right: none;
  }
  .iconfont {
    margin-right: 15px;
    color: #fff;
  }
}
.el-main {
  background-color: #fbfcff;
    .el-breadcrumb  .el-breadcrumb__item /deep/ {
    background-color: crimson !important;
    border: 1px solid darkgreen !important;
  }
}

</style>
